<template>
	<div class="sect-select-page">
		<!-- 页面标题 -->
		<div class="page-header">
			<div class="header-left">
				<button class="back-btn" @click="goBack">← 返回</button>
			</div>
			<div class="header-center">
				<h1 class="page-title">🏛️ 武林门派</h1>
				<p class="page-subtitle">江湖门派，各有所长，择一而入</p>
			</div>
			<div class="header-right"></div>
		</div>

		<!-- 门派列表 -->
		<div class="sect-list" v-if="!loading && sects.length > 0">
			<div 
				v-for="sect in sects" 
				:key="sect.id"
				class="sect-item"
				:class="{ 
					'selected': selectedSectId === sect.id,
					'joined': sect.isJoined,
					'disabled': !sect.canJoin && !sect.isJoined
				}"
				@click="selectSect(sect)"
			>
				<!-- 门派主信息 -->
				<div class="sect-main">
					<div class="sect-name-row">
						<h3 class="sect-name">{{ sect.name }}</h3>
						<div class="sect-status-badge" v-if="sect.isJoined">
							<span class="badge joined">当前门派</span>
						</div>
						<div class="sect-status-badge" v-else-if="!sect.canJoin">
							<span class="badge full">已满员</span>
						</div>
					</div>

					<div class="sect-leader-row">
						<span class="leader-label">{{ getLeaderTitle(sect.name) }}：</span>
						<span class="leader-name">{{ sect.leader }}</span>
						<span class="members-info">弟子 {{ sect.memberCount || 0 }}/{{ sect.maxMembers || 100 }}</span>
					</div>

					<div class="sect-desc">
						{{ sect.description || '这是一个神秘的门派...' }}
					</div>
				</div>

				<!-- 门派详细信息（折叠部分） -->
				<div class="sect-detail" v-if="expandedSectId === sect.id">
					<div class="detail-section" v-if="sect.attributesBonus">
						<div class="section-title">属性加成</div>
						<div class="attributes-list">
							<div v-for="(value, key) in sect.attributesBonus" :key="key" class="attr-tag">
								{{ getAttributeName(key) }} +{{ value }}
							</div>
						</div>
					</div>

					<div class="detail-section" v-if="sect.skills && sect.skills.length > 0">
						<div class="section-title">门派武学</div>
						<div class="skills-list">
							<div v-for="skill in sect.skills" :key="skill.id" class="skill-row">
								<span class="skill-name">{{ skill.name }}</span>
								<span class="skill-type" :class="skill.type">{{ skill.type === 'active' ? '主动' : '被动' }}</span>
							</div>
						</div>
					</div>
				</div>

				<!-- 操作按钮 -->
				<div class="sect-actions">
					<button 
						v-if="sect.isJoined"
						class="action-btn current-btn"
						disabled
					>
						当前门派
					</button>
					<button 
						v-else-if="sect.canJoin"
						class="action-btn join-btn"
						@click.stop="confirmJoinSect(sect)"
						:disabled="confirmLoading"
					>
						{{ confirmLoading && selectedSectId === sect.id ? '加入中...' : '加入门派' }}
					</button>
					<button 
						v-else
						class="action-btn disabled-btn"
						disabled
					>
						无法加入
					</button>

					<button 
						class="action-btn detail-btn"
						@click.stop="toggleDetail(sect)"
					>
						{{ expandedSectId === sect.id ? '收起详情 ▲' : '查看详情 ▼' }}
					</button>
				</div>
			</div>
		</div>

		<!-- 加载状态 -->
		<div v-if="loading" class="loading-container">
			<div class="loading-spinner"></div>
			<p class="loading-text">加载门派信息中...</p>
		</div>

		<!-- 空状态 -->
		<div v-if="!loading && sects.length === 0" class="empty-container">
			<div class="empty-icon">🏛️</div>
			<p class="empty-text">暂无可选择的门派</p>
			<button class="retry-btn" @click="loadSects">重新加载</button>
		</div>
	</div>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex'
import { getSectList, joinSect } from '@/api/sect'

export default {
	name: 'SectSelectPage',
	data() {
		return {
			sects: [],
			selectedSect: null,
			selectedSectId: null,
			expandedSectId: null,
			loading: false,
			confirmLoading: false
		}
	},
	
	computed: {
		...mapGetters('sect', ['hasJoinedSect', 'sectId', 'isLoading'])
	},
	
	mounted() {
		this.checkUserSectStatus()
	},
	
	onLoad() {
		this.$nextTick(() => {
			if (this.sects.length === 0) {
				this.checkUserSectStatus()
			}
		})
	},
	
	methods: {
		...mapActions('sect', ['fetchSectInfo', 'fetchSectList', 'updateSectInfo']),
		
		async checkUserSectStatus() {
			try {
				const api = await import('@/api')
				const sectInfo = await api.sectApi.getSectInfo()
				if (sectInfo && sectInfo.data && sectInfo.data.isJoined) {
					window.location.hash = '/pages/sect/index'
				} else {
					this.loadSects()
				}
			} catch (error) {
				this.loadSects()
			}
		},
		
		async loadSects() {
			try {
				this.loading = true
				const api = await import('@/api')
				const response = await api.sectApi.getSectList()
				
				if (response && response.data) {
					this.sects = response.data
				}
			} catch (error) {
				console.error('加载门派列表失败:', error)
			} finally {
				this.loading = false
			}
		},
		
		selectSect(sect) {
			this.selectedSect = sect
			this.selectedSectId = sect.id
		},
		
		toggleDetail(sect) {
			if (this.expandedSectId === sect.id) {
				this.expandedSectId = null
			} else {
				this.expandedSectId = sect.id
				this.selectedSect = sect
			}
		},
		
		goBack() {
			if (typeof uni !== 'undefined') {
				uni.reLaunch({ url: '/pages/home/index' })
			} else if (typeof window !== 'undefined') {
				window.location.hash = '#/pages/home/index'
			}
		},
		
		async confirmJoinSect(sect) {
			if (!sect.canJoin) {
				uni.showToast({
					title: '无法加入此门派',
					icon: 'none'
				})
				return
			}
			
			try {
				this.confirmLoading = true
				this.selectedSectId = sect.id
				
				const response = await joinSect(parseInt(sect.id))
				
				if (response.code === 1) {
					uni.showToast({
						title: response.msg || '成功加入门派！',
						icon: 'success'
					})
					
					this.sects = this.sects.map(s => {
						if (s.id === sect.id) {
							return { 
								...s, 
								isJoined: true, 
								canJoin: false,
								memberCount: (s.memberCount || 0) + 1
							}
						}
						return { ...s, canJoin: false }
					})
					
					this.updateSectInfo({
						sectId: sect.id,
						sectName: sect.name,
						id: sect.id,
						name: sect.name,
						...response.data
					})
					
					setTimeout(() => {
						window.location.hash = '#/pages/sect/index'
					}, 1500)
				} else {
					uni.showToast({
						title: response.msg || '加入门派失败',
						icon: 'none'
					})
				}
			} catch (error) {
				uni.showToast({
					title: error.message || '网络错误，请重试',
					icon: 'none'
				})
			} finally {
				this.confirmLoading = false
				this.selectedSectId = null
			}
		},
		
		getLeaderTitle(sectName) {
			const titleMap = {
				'桃花岛': '岛主',
				'白驼山庄': '庄主',
				'大理段氏': '王爷',
				'丐帮': '帮主',
				'全真教': '掌教'
			}
			return titleMap[sectName] || '掌门'
		},
		
		getAttributeName(key) {
			const nameMap = {
				'baseDamage': '基础伤害',
				'attack': '攻击力',
				'defense': '防御力',
				'health': '生命值',
				'speed': '速度',
				'critRate': '暴击率',
				'critical': '暴击率',
				'hitRate': '命中率',
				'dodgeRate': '闪避率',
				'dodge': '闪避率',
				'damageIncrease': '伤害增加',
				'damageReduction': '伤害减免',
				'abnormalResist': '异常抗性',
				'controlSuccess': '控制成功率'
			}
			return nameMap[key] || key
		}
	}
}
</script>

<style scoped>
/* 门派选择页面 - 武侠风格 */
.sect-select-page {
	min-height: 100vh;
	max-height: 100vh;
	overflow: hidden;
	background: linear-gradient(180deg, #e8dcc4 0%, #d4c4a8 100%);
	display: flex;
	flex-direction: column;
	font-family: "STSong", "Noto Serif SC", serif;
}

/* 页面标题 */
.page-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px 15px 12px;
	background: linear-gradient(135deg, #8b6f47 0%, #6b4f3b 100%);
	border-bottom: 3px solid #4b3a2a;
	box-shadow: 0 4px 12px rgba(139, 111, 71, 0.3);
	flex-shrink: 0;
}

.header-left, .header-right {
	width: 80px;
}

.header-center {
	flex: 1;
	text-align: center;
}

.back-btn {
	padding: 6px 14px;
	background: rgba(255, 255, 255, 0.2);
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-radius: 15px;
	color: white;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.3s ease;
}

.back-btn:hover {
	background: rgba(255, 255, 255, 0.3);
	border-color: rgba(255, 255, 255, 0.5);
	transform: translateX(-2px);
}

.page-title {
	font-size: 22px;
	font-weight: bold;
	color: #fff;
	margin-bottom: 6px;
	letter-spacing: 2px;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.page-subtitle {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.9);
	line-height: 1.5;
	letter-spacing: 1px;
}

/* 门派列表 */
.sect-list {
	flex: 1;
	overflow-y: auto;
	padding: 12px 15px 15px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sect-item {
	background: rgba(255, 255, 255, 0.95);
	border: 2px solid #c4a57b;
	border-radius: 12px;
	padding: 15px;
	transition: all 0.3s ease;
	cursor: pointer;
	box-shadow: 0 3px 10px rgba(139, 111, 71, 0.2);
}

.sect-item:hover:not(.disabled) {
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(139, 111, 71, 0.3);
	border-color: #8b6f47;
}

.sect-item.selected {
	border-color: #8b6f47;
	box-shadow: 0 5px 15px rgba(139, 111, 71, 0.35);
}

.sect-item.joined {
	background: rgba(139, 184, 134, 0.1);
	border-color: #6b8e67;
}

.sect-item.disabled {
	opacity: 0.6;
	cursor: not-allowed;
	background: rgba(200, 200, 200, 0.3);
}

.sect-item.disabled:hover {
	transform: none;
}

/* 门派主信息 */
.sect-main {
	margin-bottom: 12px;
}

.sect-name-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}

.sect-name {
	font-size: 18px;
	font-weight: bold;
	color: #4a3c2a;
	letter-spacing: 1px;
}

.sect-status-badge {
	flex-shrink: 0;
}

.badge {
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 600;
}

.badge.joined {
	background: linear-gradient(135deg, #6b8e67 0%, #5a7a56 100%);
	color: white;
}

.badge.full {
	background: linear-gradient(135deg, #c94a3f 0%, #a83931 100%);
	color: white;
}

.sect-leader-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
	font-size: 13px;
	color: #6b4f3b;
}

.leader-label {
	font-weight: 600;
	color: #8b6f47;
}

.leader-name {
	font-weight: bold;
	color: #4a3c2a;
}

.members-info {
	margin-left: auto;
	font-size: 12px;
	color: #8b6f47;
	background: rgba(139, 111, 71, 0.1);
	padding: 3px 10px;
	border-radius: 10px;
}

.sect-desc {
	font-size: 13px;
	color: #6b4f3b;
	line-height: 1.6;
	padding: 10px;
	background: rgba(139, 111, 71, 0.05);
	border-radius: 8px;
	border-left: 3px solid #8b6f47;
}

/* 门派详细信息 */
.sect-detail {
	padding: 12px 0;
	margin-bottom: 12px;
	border-top: 1px solid #d8c7a3;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.detail-section {
	background: rgba(248, 246, 241, 0.6);
	border-radius: 8px;
	padding: 10px;
	border: 1px solid #d8c7a3;
}

.section-title {
	font-size: 13px;
	font-weight: bold;
	color: #4a3c2a;
	margin-bottom: 8px;
	padding-bottom: 6px;
	border-bottom: 1px solid #d8c7a3;
}

.attributes-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.attr-tag {
	font-size: 11px;
	color: #6b4f3b;
	background: rgba(139, 111, 71, 0.15);
	border: 1px solid #c4a57b;
	border-radius: 12px;
	padding: 4px 10px;
	font-weight: 500;
}

.skills-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.skill-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 6px 10px;
	background: rgba(255, 255, 255, 0.6);
	border-radius: 6px;
	border: 1px solid #d8c7a3;
}

.skill-name {
	font-size: 12px;
	color: #4a3c2a;
	font-weight: 600;
}

.skill-type {
	font-size: 10px;
	font-weight: bold;
	padding: 2px 8px;
	border-radius: 10px;
}

.skill-type.active {
	background: linear-gradient(135deg, #8b6f47 0%, #6b4f3b 100%);
	color: white;
}

.skill-type.passive {
	background: linear-gradient(135deg, #6b8e67 0%, #5a7a56 100%);
	color: white;
}

/* 操作按钮 */
.sect-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.action-btn {
	padding: 10px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: bold;
	border: none;
	cursor: pointer;
	transition: all 0.3s ease;
	letter-spacing: 0.5px;
}

.join-btn {
	grid-column: span 2;
	background: linear-gradient(135deg, #8b6f47 0%, #6b4f3b 100%);
	color: white;
	border: 2px solid #4b3a2a;
	box-shadow: 0 3px 10px rgba(75, 58, 42, 0.25);
}

.join-btn:hover:not(:disabled) {
	transform: translateY(-1px);
	box-shadow: 0 5px 15px rgba(75, 58, 42, 0.35);
}

.join-btn:disabled {
	background: #d0d0d0;
	border-color: #999;
	color: #666;
	cursor: not-allowed;
}

.current-btn {
	grid-column: span 2;
	background: linear-gradient(135deg, #6b8e67 0%, #5a7a56 100%);
	color: white;
	border: 2px solid #4a6a46;
	cursor: default;
}

.disabled-btn {
	grid-column: span 2;
	background: #999;
	color: #fff;
	cursor: not-allowed;
}

.detail-btn {
	grid-column: span 2;
	background: rgba(139, 111, 71, 0.1);
	color: #6b4f3b;
	border: 2px solid #c4a57b;
}

.detail-btn:hover {
	background: rgba(139, 111, 71, 0.2);
	border-color: #8b6f47;
}

/* 加载状态 */
.loading-container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
	padding: 30px;
	background: rgba(255, 255, 255, 0.95);
	border-radius: 12px;
	border: 2px solid #8b6f47;
	box-shadow: 0 8px 24px rgba(139, 111, 71, 0.3);
}

.loading-spinner {
	width: 40px;
	height: 40px;
	border: 4px solid #f3f3f3;
	border-top: 4px solid #8b6f47;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.loading-text {
	color: #4a3c2a;
	font-size: 14px;
	font-weight: 600;
}

/* 空状态 */
.empty-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	gap: 20px;
	background: rgba(255, 255, 255, 0.95);
	border-radius: 12px;
	padding: 40px;
	margin: 20px;
	border: 2px solid #c4a57b;
	box-shadow: 0 4px 12px rgba(139, 111, 71, 0.2);
}

.empty-icon {
	font-size: 60px;
	opacity: 0.5;
}

.empty-text {
	font-size: 14px;
	color: #6b4f3b;
	font-weight: 500;
}

.retry-btn {
	padding: 10px 25px;
	background: linear-gradient(135deg, #8b6f47 0%, #6b4f3b 100%);
	color: white;
	border: 2px solid #4b3a2a;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
}

.retry-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(75, 58, 42, 0.3);
}

/* 响应式设计 */
@media (max-width: 480px) {
	.page-header {
		padding: 12px 12px 10px;
	}
	
	.page-title {
		font-size: 20px;
	}
	
	.page-subtitle {
		font-size: 12px;
	}
	
	.sect-list {
		padding: 10px 12px 12px;
		gap: 10px;
	}
	
	.sect-item {
		padding: 12px;
	}
	
	.sect-name {
		font-size: 16px;
	}
	
	.sect-leader-row {
		font-size: 12px;
	}
	
	.sect-desc {
		font-size: 12px;
	}
	
	.action-btn {
		font-size: 12px;
		padding: 8px;
	}
}
</style>
